<template>
  <div id="" class="houseDetail">
    <h2 v-title="'房源详情'"></h2>
    <banner-slider :housePicList="housePicList"></banner-slider>
    <div class="houseInfo">
      <div class="houseTxt">
        <span v-if="houseInfo.rentType==1">&yen;{{houseInfo.rentMoney/100}}元/月</span>
        <span v-else>&yen;{{houseInfo.rentDayMoney/100}}元/晚</span>
        <em>
          {{houseInfo.roomNum}}室{{houseInfo.hallNum}}厅{{houseInfo.washroomNum}}卫
          -{{houseInfo.floor}}/{{houseInfo.floorTotal}}层-
          {{houseInfo.houseArea}}㎡
        </em>
        <p>{{houseInfo.title}}</p>
      </div>

      <!-- 关键词 -->
      <div class="keywords">
        <span v-for="(item,index) in houseKeywords" :key="item.key">
          {{item.tag}}
        </span>
      </div>
    </div>
    <!-- 房源配备 -->
    <div class="houseMsgBox">
      <p class="houseTittle">房源配备</p>
      <house-allocation :houseRentConfigList="houseRentConfigList"></house-allocation>
    </div>
    <!-- 房源描述 -->
    <div class="houseMsgBox">
      <p class="houseTittle">房源描述</p>
      <div class="houseDescribe" :class="{'noHidden':isShow}">
        {{houseInfo.description}}
        <span class="showmore" @click="showmore" v-if="!(isShow)">...查看更多</span>
      </div>
    </div>
    <!-- 地理位置 -->
    <div class="houseMsgBox">
      <p class="houseTittle">地理位置</p>
      <div class="">
        <a-map class="houseMap" :lat="lat" :lng="lng" :address="houseInfo.address" :title="houseInfo.title"></a-map>
      </div>

    </div>

    <!-- 可租日期 -->
    <div class="houseMsgBox" v-if="houseInfo.rentType==2">
      <p class="houseTittle">可租日期</p>
      <!-- <calendar></calendar> -->
      <dateTools
      :dateToolsKey="2"　　
      :trainDateFullList="trainDateFullList"　　
      ref="topDateTools2"　　　　　　
      @topDateEvent2="topDateFun2"　　
      ></dateTools>
    </div>

    <!-- 推荐房源 -->
    <div class="houseMsgBox">
      <p class="houseTittle">推荐房源({{recommendHouseLength()}})</p>
      <recommend-house :recommendedHouseList="recommendedHouseList"></recommend-house>
    </div>
    <!-- 底部nav -->
    <div class="fixedBottom">
      <span class="collect"
      :class="{'active':isCollection}"
      @click="collectCK">
        <img :src="collectImg" width="30" alt="">
        <em v-if="isCollection">已收藏</em>
        <em v-else>收藏</em>
      </span>
      <div class="reserveBtn" >
          <button type="button" name="button" class="blockBtn" @click="toSignContact">立即签约</button>
      </div>
      <div class="reserveBtn" v-if="houseInfo.rentType==1">
        <button type="button" name="button" class="blockBtn" v-if="houseInfo.state==4" @click="callLandlord">联系房东</button>
        <button type="button" name="button" class="blockBtn"v-else @click="toReservation">预约看房</button>
      </div>
    </div>
    <!-- <house-bottom :houseId="houseInfo.houseId" :isCollection="isCollection"></house-bottom> -->
  </div>
</template>

<script src="./houseDetail.js"></script>
<style lang="scss" scoped src='./houseDetail.scss'></style>
